<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" :title="outletName+' ('+recordDate+'巡检任务)'" width="70%" append-to-body>
			<div style="padding: 20px;">
				<div class="mb20" style="display: flex;justify-content: space-between;">
					<!-- 左侧内容区域 -->
					<div style="flex: 7;">
						<!-- 设备选择区域 -->
						<div style="margin-bottom: 20px;">
							<div class="displayFlexBet mb10">
								<div style="font-size: 14px; color: #666;">设备选择</div>
								
								<div>
									<el-button type="danger" @click="handleStopProduce" :loading="stopProduceLoading">停产</el-button>
									<el-button type="primary" @click="completeInspectLine" :loading="completeLineLoading">完成排口巡检</el-button>
								</div>
							</div>
							
							<div class="defence-list-container" v-loading="loading">
								<div class="defence-list" v-if="defenceList.length > 0">
									<div 
										v-for="(item, index) in defenceList"
										:key="item.id"
										:class="['defence-item', currentDefence && currentDefence.id === item.id ? 'defence-item-active' : '']"
										@click="selectDefence(item)">
										<div class="defence-name">{{item.installationName}}</div>
										<div class="defence-status" v-if="currentDefence && currentDefence.id === item.id">
											<i class="el-icon-check"></i>
										</div>
									</div>
								</div>
								<div v-if="!loading && defenceList.length === 0" class="empty-data">
									暂无设备数据
								</div>
							</div>
						</div>
						
						<div v-loading="detailLoading">
							<!-- 设备名称 -->
							<div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #EBEEF5;" v-if="defenceDetail">
								<span style="font-size: 16px; font-weight: bold;">{{ defenceDetail.defenceName }}</span>
							</div>
							
							<!-- 运行状态 -->
							<div style="margin-bottom: 20px;" v-if="currentDefence">
								<div style="font-size: 14px; color: #666; margin-bottom: 10px;">运行状态</div>
								<div style="display: flex;">
									<div 
										:class="{'active-status': formData.status === 'NORMAL'}"
										style="border: 1px solid #E4E7ED; border-radius: 4px; padding: 10px 25px; margin-right: 10px; cursor: pointer;"
										@click="formData.status = 'NORMAL'">
										正常
									</div>
									<div 
										:class="{'active-status-warning': formData.status === 'ABNORMAL'}"
										style="border: 1px solid #E4E7ED; border-radius: 4px; padding: 10px 25px; margin-right: 10px; cursor: pointer;"
										@click="formData.status = 'ABNORMAL'">
										有异常
									</div>
									<div 
										:class="{'active-status-danger': formData.status === 'NOT_PRODUCE'}"
										style="border: 1px solid #E4E7ED; border-radius: 4px; padding: 10px 25px; cursor: pointer;"
										@click="formData.status = 'NOT_PRODUCE'">
										未运行
									</div>
								</div>
							</div>
							
							<!-- 参数列表 -->
							<div style="margin-bottom: 20px;" v-if="currentDefence && formData.parameterList && formData.parameterList.length > 0">
								<div style="font-size: 14px; color: #666; margin-bottom: 10px;">监测参数</div>
								<div class="parameter-list">
									<div v-for="(param, paramIndex) in formData.parameterList" :key="param.parameterId" class="parameter-item">
										<div class="parameter-header">
											<div class="parameter-name">{{ param.parameterName }}</div>
											<div class="parameter-value">
												<el-input v-model="param.amount" size="small" style="width: 120px;"></el-input>
												<span style="margin-left: 5px;">{{ param.unitCode }}</span>
											</div>
											<div class="parameter-range" v-if="param.minDesignValue !== null && param.maxDesignValue !== null">
												设计区间: {{ param.minDesignValue }} - {{ param.maxDesignValue }}
											</div>
										</div>
										
										<!-- DCS图表区域 -->
										<div v-if="param.dcsMn && param.dcsCode" class="parameter-chart-container">
											<div class="chart-loading" v-if="param.chartLoading">
												<el-skeleton :rows="3" animated />
											</div>
											<div :id="'dcsChart_' + paramIndex" class="parameter-chart" v-else></div>
										</div>
									</div>
								</div>
							</div>
							
							<!-- 巡检项列表 -->
							<div style="margin-bottom: 20px;" v-if="currentDefence && formData.itemList && formData.itemList.length > 0">
								<div style="font-size: 14px; color: #666; margin-bottom: 10px;">巡检项</div>
								<div class="inspect-items-container">
									<div v-for="(item, index) in formData.itemList" :key="index" class="inspect-item">
										<div class="inspect-item-name">{{ item.inspectItemName }}</div>
										<div class="inspect-item-value" v-if="item.valueType === 'STATE'">
											<el-radio-group v-model="item.result" size="small">
												<el-radio-button label="NORMAL">正常</el-radio-button>
												<el-radio-button label="ABNORMAL">异常</el-radio-button>
											</el-radio-group>
										</div>
										<div class="inspect-item-value" v-else-if="item.valueType === 'NUMBER'">
											<el-input v-model="item.amount" size="small" style="width: 120px;"></el-input>
										</div>
									</div>
								</div>
							</div>
							
							<!-- 问题工单 -->
							<div style="margin-bottom: 20px;" v-if="currentDefence">
								<div style="font-size: 14px; color: #666; margin-bottom: 10px;">问题工单</div>
								<el-input type="textarea" v-model="formData.problemNote" :rows="4" placeholder="例如：有积灰，请现场一班组组织人员清灰。"></el-input>
							</div>
							
							<!-- 按钮 -->
							<div style="display: flex; justify-content: center; margin-top: 30px;" v-if="currentDefence">
								<el-button type="primary" @click="submitForm" :loading="saveLoading" :disabled="!isFormValid">完成设备巡检</el-button>
							</div>
						</div>
					</div>
					
					<!-- 分割线 -->
					<div style="width: 1px; background-color: #EBEEF5; margin: 0 10px;"></div>
					
					<!-- 右侧视频监控区域 -->
					<div style="width:250px; margin-left: 10px;" v-if="videoList.length > 0">
						<div style="font-size: 14px; color: #666; margin-bottom: 10px;">视频监控</div>
						<div style="overflow-y: auto; max-height: 600px;">
							<div v-for="(item, index) in videoList" :key="index" class="video-item" @click="showVideo(item)">
								<el-image :src="item.coverFile" style="width: 100%; height: 150px; border-radius: 8px;" fit="cover" />
								<div class="video-position">{{ item.equipmentPosition }}</div>
								<div class="video-play-icon">
									<i class="el-icon-video-play"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
		
		<!-- 视频播放弹窗 -->
		<el-dialog title="视频监控" :visible.sync="videoDialogVisible" width="800px" append-to-body @close="closeVideo">
			<div style="text-align: center;">
				<video ref="videoElement" controls style="width: 100%; max-height: 450px;"></video>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import flvjs from 'flv.js';

export default {
	props: {
		outletId: {
			type: String,
			default: ''
		},
		outletName: {
			type: String,
			default: ''
		},
		recordDate: {
			type: String,
			default: ''
		},
		recordDateTime: {
			type: String,
			default: ''
		},
	},
	data() {
		return {
			dialogVisible: false,
			loading: false,
			defenceList: [],
			currentDefence: null,
			inspectLineId: '', // 巡检线路ID
			inspectDetailId: '', // 巡检详情ID
			detailLoading: false, // 详情加载状态
			defenceDetail: null, // 设备详情数据
			formData: {
				status: 'NORMAL', // NORMAL:正常, ABNORMAL:异常, STOP:停运
				pressure: '',
				current: '',
				hasDust: false,
				problemNote: '',
				parameterList: [], // 参数列表
				itemList: [] // 巡检项列表
			},
			stopProduceLoading: false, // 停产按钮加载状态
			completeLineLoading: false, // 完成排口巡检按钮加载状态
			saveLoading: false, // 保存巡检结果按钮加载状态
			chartInstances: [], // 存储多个echarts实例
			
			// 视频相关
			videoList: [], // 视频列表
			videoDialogVisible: false, // 视频弹窗显示状态
			currentVideo: null, // 当前选中的视频
			flvPlayer: null, // flv播放器实例
			imgBaseUrl: "https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=" // 图片基础URL
		}
	},
	computed: {
		isFormValid() {
			// 如果状态是异常或者有积灰，则需要填写问题工单
			if ((this.formData.status === 'ABNORMAL' || this.formData.hasDust) && !this.formData.problemNote) {
				return false
			}
			return true
		}
	},
	mounted() {
		// 保存全局组件引用
		window.deviceInspectFormInstance = this
	},
	destroyed() {
		// 清理图表实例
		this.chartInstances.forEach(chart => {
			if (chart) {
				chart.dispose()
			}
		})
		// 清理视频播放器
		this.closeVideo()
		// 清理全局引用
		if (window.deviceInspectFormInstance === this) {
			window.deviceInspectFormInstance = null
		}
	},
	methods: {
		// 打开弹窗并加载数据
		open(outletId, recordItem) {
			this._outletId = outletId
			this.dialogVisible = true
			this.inspectLineId = recordItem.inspectLineId || '024691c9ce51473f9411b3b76967965f' // 从记录项获取巡检线路ID，或使用默认值
			
			// 重置所有loading状态
			this.loading = false
			this.detailLoading = false
			this.stopProduceLoading = false
			this.completeLineLoading = false
			this.saveLoading = false
			
			// 初始化表单数据
			this.resetForm()
			
			// 加载设备列表
			this.getDefencesList()
			
			// 加载视频列表
			this.loadVideoList()
		},
		
		// 重置表单
		resetForm() {
			this.currentDefence = null
			this.defenceDetail = null
			this.formData = {
				status: 'NORMAL',
				pressure: '',
				current: '',
				hasDust: false,
				problemNote: '',
				parameterList: [],
				itemList: []
			}
			
			// 清理图表实例
			this.chartInstances.forEach(chart => {
				if (chart) {
					chart.dispose()
				}
			})
			this.chartInstances = []
		},
		
		// 获取设备列表
		getDefencesList() {
			this.loading = true
			this.defenceList = []
			
			// 使用全局的ajax方法
			const self = this
			this.$root.ajax({
				url: '/gasInspect/getDefencesByInspectLineId',
				data: {
					inspectLineId: this.inspectLineId
				},
				contentType: 'application/x-www-form-urlencoded',
				success: function(result) {
					self.loading = false
					if (result.data && result.data.length > 0) {
						self.defenceList = result.data
						// 默认选择第一个设备
						self.selectDefence(self.defenceList[0])
					}
				},
				error: function() {
					self.loading = false
					self.$message.error('获取设备列表失败')
				},
				complete: function() {
					// 确保在任何情况下都重置loading状态
					self.loading = false
				}
			})
		},
		
		// 选择设备
		selectDefence(defence) {
			// 清理之前的图表实例
			this.chartInstances.forEach(chart => {
				if (chart) {
					chart.dispose()
				}
			})
			this.chartInstances = []
			
			// 重置参数列表和巡检项列表，但保留其他表单数据
			this.formData.parameterList = []
			this.formData.itemList = []
			
			this.currentDefence = defence
			// 使用选中设备的ID作为inspectDetailId
			this.inspectDetailId = defence.id
			// 获取设备详情数据
			this.getDefenceDetail()
		},
		
		// 获取设备详情
		getDefenceDetail() {
			this.detailLoading = true
			
			const self = this
			this.$root.ajax({
				url: '/gasInspect/getGasInspectDefenceByDetailId',
				data: {
					inspectDetailId: this.inspectDetailId
				},
				contentType: 'application/x-www-form-urlencoded',
				success: function(result) {
					self.detailLoading = false
					if (result.status === 1 && result.data) {
						self.defenceDetail = result.data
						// 填充表单数据
						self.fillFormData(result.data)
					}
				},
				error: function() {
					self.detailLoading = false
					self.$message.error('获取设备详情失败')
				},
				complete: function() {
					// 确保在任何情况下都重置loading状态
					self.detailLoading = false
				}
			})
		},
		
		// 根据设备详情填充表单数据
		fillFormData(detail) {
			// 确保清空之前的数据
			this.formData.parameterList = []
			this.formData.itemList = []
			
			// 设置运行状态
			if (detail.result) {
				this.formData.status = detail.result
			}
			
			// 填充参数数据（找到风机压力和风机电流等参数）
			if (detail.parameterList && detail.parameterList.length > 0) {
				// 为每个参数添加图表加载状态属性
				this.formData.parameterList = detail.parameterList.map(param => {
					return {
						...param,
						chartLoading: false
					}
				})
				
				// 查找风机压力参数
				const pressureParam = detail.parameterList.find(p => 
					p.parameterName && p.parameterName.includes('压力')
				)
				if (pressureParam) {
					this.formData.pressure = pressureParam.amount
				}
				
				// 查找风机电流参数
				const currentParam = detail.parameterList.find(p => 
					p.parameterName && p.parameterName.includes('电流')
				)
				if (currentParam) {
					this.formData.current = currentParam.amount
				}
				
				// 自动加载有DCS数据的参数图表
				this.$nextTick(() => {
					this.formData.parameterList.forEach((param, index) => {
						if (param.dcsMn && param.dcsCode) {
							this.loadDcsChartData(param, index)
						}
					})
				})
			} else {
				// 如果没有参数，确保参数列表为空数组
				this.formData.parameterList = []
				this.formData.pressure = ''
				this.formData.current = ''
			}
			
			// 填充巡检项数据
			if (detail.itemList && detail.itemList.length > 0) {
				this.formData.itemList = detail.itemList
			} else {
				// 如果没有巡检项，确保巡检项列表为空数组
				this.formData.itemList = []
				this.formData.hasDust = false
			}
			
			// 问题工单内容
			if (detail.isWrong) {
				this.formData.hasDust = true
			}
			if (detail.wrongContent) {
				this.formData.problemNote = detail.wrongContent
			} else {
				this.formData.problemNote = ''
			}
		},
		
		// 加载DCS图表数据
		loadDcsChartData(parameter, paramIndex) {
			// 设置加载状态
			this.$set(this.formData.parameterList[paramIndex], 'chartLoading', true)
			
			const self = this
			
			// 构建请求参数
			const requestData = {
				parameterId: parameter.parameterId,
				dcsMn: parameter.dcsMn,
				dcsCode: parameter.dcsCode,
				installationType: 'GAS_DEFENCE',
				installationId: this.currentDefence.installationId,
				recordDate: this.recordDateTime
			}
			
			this.$root.ajax({
				url: '/productionEquipment/stdBook/getEquipDayParameterAmountList',
				data: JSON.stringify(requestData),
				contentType: 'application/json',
				success: function(result) {
					// 取消加载状态
					self.$set(self.formData.parameterList[paramIndex], 'chartLoading', false)
					
					if (result.data && result.data.length > 0) {
						// 处理图表数据
						const values = []
						const times = []
						
						result.data.forEach(item => {
							values.push(item.amount)
							// 只显示时间部分
							times.push(item.date.split(' ')[1])
						})
						
						// 渲染图表
						self.renderDcsChart(values, times, parameter, paramIndex)
					} else {
						self.$message.warning(`${parameter.parameterName}暂无DCS数据`)
					}
				},
				error: function() {
					// 取消加载状态
					self.$set(self.formData.parameterList[paramIndex], 'chartLoading', false)
					self.$message.error('获取DCS数据失败')
				},
				complete: function() {
					// 确保在任何情况下都重置loading状态
					self.$set(self.formData.parameterList[paramIndex], 'chartLoading', false)
				}
			})
		},
		
		// 渲染DCS图表
		renderDcsChart(values, times, parameter, paramIndex) {
			// 确保DOM已经渲染
			this.$nextTick(() => {
				const chartDom = document.getElementById('dcsChart_' + paramIndex)
				if (!chartDom) return
				
				// 销毁之前的图表实例
				if (this.chartInstances[paramIndex]) {
					this.chartInstances[paramIndex].dispose()
				}
				
				// 创建新的图表实例
				this.chartInstances[paramIndex] = echarts.init(chartDom)
				
				// 图表配置
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: "10%",
						bottom: "15%",
						left: "5%",
						right: "5%"
					},
					xAxis: {
						type: 'category',
						data: times,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#FAFBFC"],
							},
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: "rgba(215, 215, 215, 1)",
							},
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					series: [{
						data: values,
						type: 'line',
						smooth: true,
						label: {
							show: true,
							position: 'top',
							formatter: function(data) {
								if (parameter.maxDesignValue) {
									if (parameter.maxDesignValue < data.value) {
										return '{a|' + data.value + '}'
									}
								}
								return data.value
							},
							rich: {
								'a': {
									color: '#EE6666'
								},
							}
						},
						itemStyle: {
							color: (params) => {
								if (parameter.maxDesignValue) {
									if (parameter.maxDesignValue < params.data) {
										return '#EE6666'
									}
								}
								return '#3A3EF4'
							}
						}
					}]
				}
				
				// 渲染图表
				this.chartInstances[paramIndex].setOption(option)
			})
		},
		
		// 加载视频列表
		loadVideoList() {
			const self = this
			this.$root.ajax({
				url: '/video/findGasVideoMonitor',
				data: {
					outletId: this._outletId,
					ticketId: this.$store.state.token
				},
				contentType: 'application/x-www-form-urlencoded',
				success: function(result) {
					if (result.data && result.data.length > 0) {
						// 处理视频列表数据，添加封面图片URL
						self.videoList = result.data.map(item => {
							return {
								...item,
								coverFile: self.imgBaseUrl + item.coverFileId
							}
						})
					} else {
						self.videoList = []
					}
				},
				error: function() {
					self.$message.error('获取视频监控列表失败')
					self.videoList = []
				}
			})
		},
		
		// 显示视频
		showVideo(video) {
			this.currentVideo = video
			this.videoDialogVisible = true
			
			// 在DOM更新后初始化视频播放器
			this.$nextTick(() => {
				const videoElement = this.$refs.videoElement
				
				// 检查浏览器是否支持flv.js
				if (flvjs.isSupported()) {
					// 销毁之前的播放器实例
					if (this.flvPlayer) {
						this.flvPlayer.destroy()
						this.flvPlayer = null
					}
					
					// 创建新的播放器实例
					this.flvPlayer = flvjs.createPlayer({
						type: 'flv',
						url: video.url
					})
					
					// 绑定视频元素
					this.flvPlayer.attachMediaElement(videoElement)
					
					// 加载并播放视频
					this.flvPlayer.load()
					this.flvPlayer.play()
				} else {
					this.$message.error('当前浏览器不支持FLV视频格式')
				}
			})
		},
		
		// 关闭视频
		closeVideo() {
			// 销毁播放器实例
			if (this.flvPlayer) {
				this.flvPlayer.destroy()
				this.flvPlayer = null
			}
		},
		
		// 提交表单
		submitForm() {
			if (!this.isFormValid) {
				if ((this.formData.status === 'ABNORMAL' || this.formData.hasDust) && !this.formData.problemNote) {
					this.$message.warning('请填写问题工单')
					return
				}
				return
			}
			
			// 整理要提交的数据，将当前防治设施的信息和巡检结果整合在一起
			const submitData = {
				...this.defenceDetail, // 使用详情接口返回的对象作为基础
				id: this.inspectDetailId, // 确保ID正确
				defenceId: this.currentDefence.id,
				installationId: this.currentDefence.installationId,
				installationName: this.currentDefence.installationName,
				result: this.formData.status, // 设置运行状态
				isWrong: this.formData.status === 'ABNORMAL' || this.formData.hasDust,
				wrongContent: (this.formData.status === 'ABNORMAL' || this.formData.hasDust) ? this.formData.problemNote : null,
				
				// 更新参数值
				parameterList: this.formData.parameterList.map(param => {
					// 查找风机压力参数
					if (param.parameterName && param.parameterName.includes('压力')) {
						param.amount = parseFloat(this.formData.pressure) || param.amount
					}
					// 查找风机电流参数
					if (param.parameterName && param.parameterName.includes('电流')) {
						param.amount = parseFloat(this.formData.current) || param.amount
					}
					return param
				}),
				
				// 更新巡检项结果
				itemList: this.formData.itemList.map(item => {
					// 检查积灰相关巡检项
					if (item.inspectItemName && item.inspectItemName.includes('积灰')) {
						item.result = this.formData.hasDust ? 'ABNORMAL' : 'NORMAL'
						item.resultStr = this.formData.hasDust ? '异常' : '正常'
					}
					return item
				})
			}
			
			// 保存巡检结果
			this.saveInspectResult(submitData)
		},
		
		// 保存巡检结果
		saveInspectResult(data) {
			this.saveLoading = true
			const self = this
			this.$root.ajax({
				url: '/gasInspect/saveGasInspectDefence',
				data: JSON.stringify(data),
				contentType: 'application/json',
				success: function(result) {
					self.saveLoading = false
					if (result.status === 1) {
						// 发送成功消息
						self.$message({
							type: 'success',
							message: '设备巡检已完成'
						})
						
						// 通知父组件
						self.$emit('submit', data)
						
						// 刷新设备详情
						self.getDefenceDetail()
					} else {
						self.$message.error(result.message || '保存巡检结果失败')
					}
				},
				error: function() {
					self.saveLoading = false
					self.$message.error('保存巡检结果失败')
				},
				complete: function() {
					// 确保在任何情况下都重置loading状态
					self.saveLoading = false
				}
			})
		},
		
		// 停产
		handleStopProduce() {
			this.stopProduceLoading = true
			const self = this
			this.$root.ajax({
				url: '/gasInspect/stopProduce',
				data: {
					inspectLineId: this.inspectLineId
				},
				contentType: 'application/x-www-form-urlencoded',
				success: function(result) {
					self.stopProduceLoading = false
					if (result.status === 1) {
						self.$message({
							type: 'success',
							message: '停产成功'
						})
						// 关闭对话框
						self.dialogVisible = false
						// 通知父组件刷新
						self.$emit('refresh')
					} else {
						self.$message.error(result.message || '停产失败')
					}
				},
				error: function() {
					self.stopProduceLoading = false
					self.$message.error('停产失败')
				},
				complete: function() {
					// 确保在任何情况下都重置loading状态
					self.stopProduceLoading = false
				}
			})
		},
		
		// 完成排口巡检
		completeInspectLine() {
			this.completeLineLoading = true
			const self = this
			this.$root.ajax({
				url: '/gasInspect/completeGasInspectLine',
				data: {
					inspectLineId: this.inspectLineId
				},
				contentType: 'application/x-www-form-urlencoded',
				success: function(result) {
					self.completeLineLoading = false
					if (result.status === 1) {
						self.$message({
							type: 'success',
							message: '完成排口巡检成功'
						})
						// 关闭对话框
						self.dialogVisible = false
						// 通知父组件刷新
						self.$emit('refresh')
					} else {
						self.$message.error(result.message || '完成排口巡检失败')
					}
				},
				error: function() {
					self.completeLineLoading = false
					self.$message.error('完成排口巡检失败')
				},
				complete: function() {
					// 确保在任何情况下都重置loading状态
					self.completeLineLoading = false
				}
			})
		}
	}
}
</script>

<style scoped>
.active-status {
	background-color: #F0F9EB;
	color: #67C23A;
	border-color: #C2E7B0;
}
.active-status-warning {
	background-color: #FDF6EC;
	color: #E6A23C;
	border-color: #F5DAB1;
}
.active-status-danger {
	background-color: #FEF0F0;
	color: #F56C6C;
	border-color: #FAC6C6;
}
.cursor-pointer {
	cursor: pointer;
}

/* 设备列表样式 */
.defence-list-container {
	border: 1px solid #EBEEF5;
	border-radius: 4px;
	padding: 10px;
	min-height: 60px;
}
.defence-list {
	display: flex;
	flex-wrap: wrap;
	max-height: 120px;
	overflow-y: auto;
}
.defence-item {
	position: relative;
	min-width: 120px;
	height: 40px;
	line-height: 40px;
	margin: 5px;
	padding: 0 15px;
	background-color: #F5F7FA;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	transition: all 0.3s;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.defence-item:hover {
	background-color: #EBEEF5;
	transform: translateY(-2px);
	box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.defence-item-active {
	background-color: #EAFF8F;
	color: #333;
	border: 1px solid #C2E7B0;
}
.defence-name {
	display: inline-block;
	max-width: calc(100% - 25px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.defence-status {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #67C23A;
}
.empty-data {
	text-align: center;
	color: #909399;
	padding: 15px 0;
}

/* 巡检项样式 */
.inspect-items-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
.inspect-item {
	width: calc(50% - 20px);
	margin: 10px;
	padding: 15px;
	border: 1px solid #EBEEF5;
	border-radius: 4px;
	background-color: #FAFAFA;
}
.inspect-item-name {
	font-size: 14px;
	color: #606266;
	margin-bottom: 10px;
}
.inspect-item-value {
	display: flex;
	align-items: center;
}

/* 参数列表样式 */
.parameter-list {
	border: 1px solid #EBEEF5;
	border-radius: 4px;
	padding: 10px;
}
.parameter-item {
	border-bottom: 1px dashed #EBEEF5;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.parameter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.parameter-name {
	font-size: 14px;
	color: #666;
	flex-grow: 1;
	margin-right: 10px;
}
.parameter-value {
	display: flex;
	align-items: center;
}
.parameter-range {
	font-size: 12px;
	color: #909399;
}
.parameter-chart-container {
	position: relative;
}
.chart-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}
.parameter-chart {
	width: 100%;
	height: 200px; /* 调整图表高度 */
}
.chart-actions {
	margin-top: 10px;
	text-align: right;
}

/* 视频监控样式 */
.video-item {
	position: relative;
	margin-bottom: 15px;
	cursor: pointer;
	transition: all 0.3s;
	border-radius: 8px;
	overflow: hidden;
}
.video-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.video-position {
	font-size: 12px;
	color: #606266;
	padding: 5px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.video-play-icon {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}
.video-play-icon i {
	color: #fff;
	font-size: 24px;
}

/* 工具类 */
.displayFlexBet {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.mb10 {
	margin-bottom: 10px;
}
.mb20 {
	margin-bottom: 20px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
	.inspect-item {
		width: calc(100% - 20px);
	}
}
</style> 